<template>
  <div class="pad_05 ub ub-ver">
    <div class="ub ub-pj bottom_line">
      <div class="ub ub-ver addr wd_30" @click="pickCity(0)">
        <div class="ub ub-ac thin">出发地</div>
        <div class="ub bold ub-ac" v-if="sContent.beginCityName">{{sContent.beginCityName}}</div>
        <div class="ub bold ub-ac" v-if="!sContent.beginCityName">请选择</div>
      </div>
      <div class="ub ub-ac ub-pc">
        <div class="ub img_change ub-img" @click="exchange"></div>
      </div>
      <div class="ub ub-ver addr wd_30" @click="pickCity(1)">
        <div class="ub ub-ac thin ub-pe">目的地</div>
        <div class="ub bold ub-ac ub-pe" v-if="sContent.endCityName">{{sContent.endCityName}}</div>
        <div class="ub bold ub-ac ub-pe" v-if="!sContent.endCityName">请选择</div>
      </div>
    </div>
    <div class="ub bottom_line" @click="$router.push('/calendar')">
      <div class="ub ub-ver addr">
        <div class="ub ub-ac thin">出发时间</div>
        <div class="ub ub-ac">
          <div class="ub bold ub-ac">{{$utils.getWeek(sContent.beginDate).four.month+'月'+$utils.getWeek(sContent.beginDate).four.date+'日'}}</div>
          <div class="ub ub-ac ub-pc thin" v-show="showMT()">(明天)</div>
        </div>
      </div>
    </div>
    <div class="ub bottom_line ub-pj" @click="showMask = true">
      <div class="ub ub-ver addr">
        <div class="ub ub-ac thin">已选择乘机人</div>
        <div class="ub ub-ac">
          <div class="ub bold ub-ac">{{sContent.adt}}成人</div>
          <div class="ub bold ub-ac" v-show="sContent.cnn !=0">，1儿童</div>
          <div class="ub bold ub-ac" v-show="sContent.inf !=0">，1婴儿</div>
        </div>
      </div>
      <div class="ub ub-ac">
        <div class="ub-img arr_right"></div>
      </div>
    </div>
    <div class="ub btn ub-ac ub-pc" @click="commitSearch">
      <div class="ub fz12">查询机票</div>
    </div>
    <div class="ub mar_t1" @click="severText">
      <div class="ub-img gantan"></div>
      <div class="ub mar_l1 fc-8b fz08 ub-ac">
        运输总条件/不正常航班服务指南/乘客告知书
      </div>
    </div>
    <div class="mask" @click="showMask = false" v-show="showMask">
      <div>
        <div class="ub ub-ver fc_333">
          <div class="ub">
            <div class="ub bold ub-ac">{{sContent.adt}}成人</div>
            <div class="ub bold ub-ac" v-show="sContent.cnn !=0">，1儿童</div>
            <div class="ub bold ub-ac" v-show="sContent.inf !=0">，1婴儿</div>
          </div>
          <div class="ub ub-pj pad_05">
            <div class="ub">
              <div class="ub ub-ac">成人</div>
              <div class="ub fc-8b fz08 ub-ac">≥12岁</div>
            </div>
            <div class="ub">
              <div class="ball" :class="{'selBall':sContent.adt==1 }" @click.stop=" sContent.adt='1' ;savedata()">1</div>
              <div class="ball" :class="{'selBall':sContent.adt==2 }" @click.stop=" sContent.adt='2' ;savedata()">2</div>
              <div class="ball" :class="{'selBall':sContent.adt==3 }" @click.stop=" sContent.adt='3' ;savedata()">3</div>
            </div>
          </div>
          <div class="ub ub-pj pad_05">
            <div class="ub">
              <div class="ub ub-ac">儿童</div>
              <div class="ub fc-8b fz08 ub-ac">2岁(含)-12岁</div>
            </div>
            <div class="ub">
              <div class="ball" :class="{'selBall':sContent.cnn==0 }" @click.stop=" sContent.cnn='0' ;savedata()">0</div>
              <div class="ball" :class="{'selBall':sContent.cnn==1 }" @click.stop=" sContent.cnn='1' ;savedata()">1</div>
            </div>
          </div>
          <div class="ub ub-pj pad_05" v-show="ifynn">
            <div class="ub">
              <div class="ub ub-ac">婴儿</div>
              <div class="ub fc-8b fz08 ub-ac">14天(含)-2岁</div>
            </div>
            <div class="ub">
              <div class="ball" :class="{'selBall':sContent.inf==0 }" @click.stop=" sContent.inf='0' ;savedata()">0</div>
              <div class="ball" :class="{'selBall':sContent.inf==1 }" @click.stop=" sContent.inf='1' ;savedata()">1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '首页',
      right: '',
      middle: '西部航空',
      ifshow: true,
      leftAction: '/index',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    if (!this.calendar.hasValue) {
      this.$store.commit('initSelDay');
    }
    if (!this.cityPicker.ifInit) {
      this.getCities();
    } else {
      let cityPicker = this.cityPicker;
      this.sContent.beginCity = cityPicker.beginCity;
      this.sContent.beginCityName = cityPicker.beginCityName;
      this.sContent.endCity = cityPicker.endCity;
      this.sContent.endCityName = cityPicker.endCityName;
    }
    this.sContent.beginDate = this.calendar.str;
    // let cityPicker = this.cityPicker;
    // this.sContent.beginCity = cityPicker.beginCity;
    // this.sContent.beginCityName = cityPicker.beginCityName;
    // this.sContent.endCity = cityPicker.endCity;
    // this.sContent.endCityName = cityPicker.endCityName;
    this.sContent.adt = this.flights.passengerNum.adt;
    this.sContent.cnn = this.flights.passengerNum.cnn;
    this.sContent.inf = this.flights.passengerNum.inf;
    if (this.sContent.beginCityName === '新加坡' || this.sContent.endCityName === '新加坡') {
      this.ifynn = false;
      this.sContent.inf = '0'
    } else {
      this.ifynn = true;
      // this.sContent.inf = '0'
    }
  },
  data: function () {
    return {
      sContent: {
        adt: '1',
        cnn: '0',
        inf: '0',
        beginDate: '',
        beginCity: '',
        beginCityName: '',
        backDate: '',
        endCity: '',
        endCityName: '',
        type: '1',
        ifynn: true
      },
      showMask: false
    }
  },
  methods: {
    savedata: function () {
      console.log(111)
      let sc = this.sContent;
      let adt = sc.adt;
      let cnn = sc.cnn;
      let inf = sc.inf;
      this.$store.commit('setSearchOpt', sc);
      this.$store.commit('setPassengerNum', { adt, cnn, inf }) // 保存选择人数
    },
    severText: function () {
      let content = {
        'columnId': '129',
        'detail': '',
        'listTitle': '服务条款',
        'detailTitle': '',
        'newsTypeId': '',
        'firstDate': [],
        'secondDate': []
      }
      this.$store.commit('sethelpCenter', content);
      this.$router.push('/helpCenterList')
    },
    showMT: function () {
      let tomorrow = new Date().getTime() + 24 * 60 * 60 * 1000;
      let str = this.$utils.formatTime(tomorrow).first;
      // console.log(str);
      // console.log('------------------')
      // console.log(this.sContent.beginDate)
      if (str === this.sContent.beginDate) {
        return true
      } else {
        return false;
      }
    },
    pickCity: function (type) {
      this.$store.commit('setCityPickerType', type);
      this.$router.push('/cityPicker');
    },
    exchange: function () {
      console.log('click');
      let cityPicker = this.cityPicker;
      let beginCity = cityPicker.beginCity;
      let beginCityName = cityPicker.beginCityName;
      let endCity = cityPicker.endCity;
      let endCityName = cityPicker.endCityName;
      this.$store.commit('setCity', { type: 0, city: endCity, cityName: endCityName });
      this.$store.commit('setCity', { type: 1, city: beginCity, cityName: beginCityName });
      this.sContent.beginCity = [this.sContent.endCity, (this.sContent.endCity = this.sContent.beginCity)][0];
      this.sContent.beginCityName = [this.sContent.endCityName, (this.sContent.endCityName = this.sContent.beginCityName)][0];
    },
    commitSearch: function () {
      let sc = this.sContent;
      let adt = sc.adt;
      let cnn = sc.cnn;
      let inf = sc.inf;
      if ((!sc.beginCity) || (!sc.endCity)) {
        this.$store.dispatch('showTx', { text: '请选择城市' });
        return false;
      }
      this.$store.commit('setSearchOpt', sc);
      this.$store.commit('setPassengerNum', { adt, cnn, inf }) // 保存选择人数
      if (sc.beginCityName === '新加坡' || sc.endCityName === '新加坡') {
        this.$store.commit('setIshome', true);
      } else {
        this.$store.commit('setIshome', false);
      }
      this.$router.push('/airTicketBookingResult');
    },
    getCities: function () {
      let content = {};
      let data = this.$utils.getUserContent(content);
      let self = this;
      this.$utils.ajax(data, 'queryAirlineCityList', self, function (data) {
        console.log(data);
        let content = data.content;
        let citys = content.city_list;
        let hotCity = content.hot_city_list;
        let defaultCity = content.recomendFlight;
        let beginCity = defaultCity.departureCity;
        let arriveCity = defaultCity.arrivedCity;
        self.$store.commit('setCityPickerArr', [{ name: 'hotCity', arr: hotCity }, { name: 'citys', arr: citys }]);
        self.$store.commit('setCity', { type: 0, city: beginCity.code3, cityName: beginCity.city });
        self.$store.commit('setCity', { type: 1, city: arriveCity.code3, cityName: arriveCity.city });
        // self.getKey();
        let cityPicker = self.cityPicker;
        self.sContent.beginCity = cityPicker.beginCity;
        self.sContent.beginCityName = cityPicker.beginCityName;
        self.sContent.endCity = cityPicker.endCity;
        self.sContent.endCityName = cityPicker.endCityName;
      })
    }
  },
  computed: mapState(['flights', 'calendar', 'cityPicker', 'orderPayment'])
}
</script>


<style lang="stylus" scoped>
@import '../../stylus/base.styl';
.wd_30
  width: 30%;
.ball
  width: f_times(2.5);
  height: f_times(2.5);
  line-height: f_times(2.5);
  border: 1px solid transparent;
  background-color: #f2f2f2;
  margin-right: f_times(1);
  text-align: center;
  border-radius: 50%;
.selBall
  border: 1px solid #843d99 !important;
  color: #843d99;
.mask
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  >div
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    background-color: #fff;
    height: f_times(12);
    padding: f_times(0.8);
    width: 100%;
.gantan
  width: f_times(1);
  height: f_times(1);
  background-image: url('list_info.png');
.btn
  background-color: #ff9d00;
  color: #fff;
  padding: f_times(0.7);
  border-radius: 8px;
.arr_right
  width: f_times(1);
  height: f_times(1);
  background-image: url('index_link@2x.png');
.bottom_line
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: f_times(1);
.img_change
  width: f_times(2);
  height: f_times(2);
  background-image: url('index_change@2x.png');
.addr
  .thin
    color: #888;
    font-size: f_times(0.8);
    padding-bottom: f_times(0.2);
  .bold
    font-size: f_times(1.2);
    font-weight: bold;
    margin: f_times(0.4) 0 f_times(0.8);
</style>